import React, { Component } from 'react'
import './index.scss'

class Product extends Component{
	constructor(props) {
		super(props);
		this.state = {
			productData: this.props.productData
		}
	}

	render() {
		return (
			<div id="product">
					{
							this.state.productData.map((data,index) =>
									<div className="product" key={index}>
											<p className="title">{data.title}</p>
											<div className="product-card">
													{
															data.list.map(item =>
																	<div className="product-card-item" key={item.id} onClick={this.toDetail.bind(this,item.id)}>
																			<div className="img">
																					<img src={item.img} alt=""/>
																			</div>
																			{
																					item.tip_mark?
																					<span className="tip-mark">{item.tip_mark}</span>
																					:null
																			}
																			<p className="pro-title">{item.title}</p>
																			<p className="pro-subtitle">{item.subtitle}</p>
																			<div className="mark">
																					{
																							item.mark.map((item, index) =>
																								<span key={index}>{item.name}</span>
																							)
																					}
																			</div>
																			<div className="price"><span>￥{item.price}</span>起</div>
																	</div>
															)
													}
											</div>
									</div>
							)
					}
			</div>
		)
	}

	toDetail(id) {
			this.props.history.push(`/detail/${id}`)
	}

}

export default Product
